<template>
    <div class="header">
        <div class="left">
            <!--<HeaderIconView :name="setting!.collapse ? 'Expand' : 'Fold'" @click="changeCollapse" />-->
            <!-- <HeaderIconView name="Refresh" /> -->
            <!-- 快捷唤起搜索 -->
            <SearchView :isShow="viewData.isWindow" />
        </div>
        <div class="right">
            <HeaderIconView name="FullScreen" @click="handleFullScreen" />
            <div class="user">
                <div class="ava" @click="handleToPersonal">
                    <el-avatar :size="30" :src="systemInfo.userInfo?.avatar"></el-avatar>
                </div>
                <el-dropdown @command="">
                    <template #default>
                        <span class="username el-dropdown-link">
                            {{ systemInfo.userInfo?.username }}
                            <el-icon class="el-icon--right"><arrow-down /></el-icon>
                        </span>
                    </template>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item icon="Edit" @click="handleToPersonal">我的资料</el-dropdown-item>
                            <el-dropdown-item icon="Wallet" @click.stop="handleEditPassword">修改密码</el-dropdown-item>
                            <el-dropdown-item icon="SwitchButton" divided @click="handleLoginOut">
                                退出系统
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
    </div>
    <el-drawer v-model="viewData.drawer" @close="viewData.drawer = false" @open="handleOpenDrawer">
        <template #header>
            <span class="customTitle">主题设置</span>
        </template>
        <SettingView />
    </el-drawer>
    <!-- 修改密码 -->
    <EditPasswordView v-model="viewData.editPassword"></EditPasswordView>
</template>

<script lang="ts" setup>
import { useSetting, useSystem } from '@/store'
import { storeToRefs } from 'pinia'
import { useDark } from '@vueuse/core'
import { temp } from '@/components/layouts/lib/settingStyle'
import { data } from '@/components/search/components/headerSearch'
import { reactive, onMounted, onUnmounted } from 'vue'
import SettingView from '@/components/layouts/lib/setting.vue'
import HeaderIconView from '@/components/layouts/lib/headerIcon.vue'
import SearchView from '@/components/search/search.vue'
import EditPasswordView from '@/components/personal/editPassword.vue'
import screenfull from 'screenfull'
import { useRouter } from 'vue-router'
import { routePathPush } from '@/utils'

const router = useRouter()
const settingStore = useSetting()
const systemInfo = useSystem()
const { setting } = storeToRefs(settingStore)
const screenfulView: any = screenfull
const viewData = reactive({
    drawer: false,
    msgNum: '',
    isFullscreen: false,
    editPassword: false,
    isWindow: true,
})

const handleToPersonal = async () => {
    await routePathPush('/admin/personal')
}

const changeCollapse = () => {
    settingStore.setSetting('collapse', !setting.value!.collapse)
}

const handleEditPassword = () => {
    viewData.editPassword = true
}

// 获取消息个数
const getMsgNum = (num: string) => {
    viewData.msgNum = num
}

// 监听变化
const change = () => {
    viewData.isFullscreen = screenfulView.isFullscreen
}

// 实现全屏功能
const handleFullScreen = () => {
    screenfulView.toggle()
}

// 退出功能
const handleLoginOut = async () => {
    await systemInfo.logout()
}

/**
useDark({
    storageKey: 'dark_gcjiu',
    selector: 'html',
    attribute: 'class',
    valueDark: 'dark',
    valueLight: 'light',
})
**/
const handleBeforeEnter = () => {
    if (settingStore.setting?.topChatTextColor) {
        useStyle('--header-chat-text-color', settingStore.setting.topChatTextColor)
    }
}

const handleOpenDrawer = () => {
    if (settingStore.setting?.topSettingStyle) {
        temp.topSettingStyle.model = settingStore.setting.topSettingStyle
        useStyle('--header-setting-color', settingStore.setting.topSettingStyle)
    }
    if (settingStore.setting?.topChatTextColor) {
        temp.topChatTextColor.model = settingStore.setting.topChatTextColor
    }
    if (settingStore.setting?.topSearchStyle) {
        temp.topSearchStyle.model = settingStore.setting.topSearchStyle
    }
    if (settingStore.setting?.menuBgStyle) {
        temp.menuBgStyle.model = settingStore.setting.menuBgStyle
    }
    if (settingStore.setting?.menuActiveStyle) {
        temp.menuActiveStyle.model = settingStore.setting.menuActiveStyle
    }
    if (settingStore.setting?.menuTextStyle) {
        temp.menuTextStyle.model = settingStore.setting.menuTextStyle
    }
    if (settingStore.setting?.menuHoverColorStyle) {
        temp.menuHoverColorStyle.model = settingStore.setting.menuHoverColorStyle
    }
    if (settingStore.setting?.breadcrumbTextStyle) {
        temp.breadcrumbTextStyle.model = settingStore.setting.breadcrumbTextStyle
    }
    if (settingStore.setting?.breadcrumbActiveStyle) {
        temp.breadcrumbActiveStyle.model = settingStore.setting.breadcrumbActiveStyle
    }
    if (settingStore.setting?.breadcrumbHoverStyle) {
        temp.breadcrumbHoverStyle.model = settingStore.setting.breadcrumbHoverStyle
    }
}

// 定义设置样式的方法
const useStyle = (scssName: string, color: string) => {
    document.getElementsByTagName('html')[0].style.setProperty(scssName, color)
}

// 删除侦听器
onUnmounted(() => {
    screenfulView.off('change', change)
})

onMounted(() => {
    // 设置侦听器
    screenfulView.on('change', change)
    if (settingStore.setting?.menuBgStyle) {
        useStyle('--menu-bg-color', settingStore.setting.menuBgStyle)
    }
    if (settingStore.setting?.menuActiveStyle) {
        useStyle('--menu-active-text-color', settingStore.setting.menuActiveStyle)
    }
    if (settingStore.setting?.menutTextStyle) {
        useStyle('--menu-text-color', settingStore.setting.menutTextStyle)
    }
    if (settingStore.setting?.menuHoverColorStyle) {
        useStyle('--menu-hover-bg-color', settingStore.setting.menuHoverColorStyle)
    }
    if (settingStore.setting?.breadcrumbTextStyle) {
        useStyle('--breadcrumb-text-color', settingStore.setting.breadcrumbTextStyle)
    }
    if (settingStore.setting?.breadcrumbActiveStyle) {
        useStyle('--breadcrumb-active-bg', settingStore.setting.breadcrumbActiveStyle)
    }
    if (settingStore.setting?.breadcrumbHoverStyle) {
        useStyle('--breadcrumb-hover-bg', settingStore.setting.breadcrumbHoverStyle)
    }
    OSnow()
})

//判断系统类型
const OSnow = () => {
    const isMac = /macintosh|mac os x/i.test(navigator.userAgent)
    document.addEventListener('keydown', (e) => {
        if (((e.metaKey && isMac) || e.ctrlKey) && e.key === 'k') {
            e.preventDefault()
            data.isShowDialog = true
            viewData.isWindow = false
        }
    })
}
</script>

<style scoped lang="scss">
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    height: 4rem;
    .left,
    .right {
        display: flex;
        align-items: center;
        &:first-child > div {
            margin-right: 1rem;
        }
        &:last-child > div {
            margin-left: 1rem;
        }
        .user {
            display: flex;
            align-items: center;
            .ava {
                cursor: pointer;
            }
            .username {
                display: inline-block;
                padding: 0 0.5rem;
                cursor: pointer;
                &:hover {
                    border: none;
                }
            }
            .el-dropdown {
                .el-dropdown-link {
                    &:focus {
                        outline: none;
                    }
                }
            }
        }
    }
}
.customTitle {
    font-size: 1rem;
    color: var(--header-drawer-color);
}
</style>
